<template>
  <div
    id="main26"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main26')
      var myChart = this.$echarts.init(chartDom)
      var option
      const data = [{
        name: '本科',
        value: 754
      },
      {
        name: '硕士',
        value: 611
      },
      {
        name: '大专',
        value: 400
      },
      {
        name: '博士',
        value: 200
      }
      ]
      const sumValue = 1000
      const optionData = getData(data)

      function getData (data) {
        var res = {
          series: [{
            name: '大环',
            type: 'gauge',
            splitNumber: 15,
            radius: '100%',
            center: ['50%', '55%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [
                  [1, '#1f59a7']
                ]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: 'auto',
                width: 3.5
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 15,
            radius: '92%',
            center: ['50%', '55%'],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#1f59a7',
                width: 3
              },
              length: 20,
              splitNumber: 5
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          }
          ],
          yAxis: []
        }
        for (let i = 0; i < data.length; i++) {
          res.series.push({
            name: '学历',
            type: 'pie',
            clockWise: true,
            z: 2,
            hoverAnimation: false,
            radius: [73 - i * 15 + '%', 68 - i * 15 + '%'],
            center: ['50%', '55%'],
            label: {
              show: true,
              formatter: '{d}%',
              color: 'RGB(246,175,101)',
              fontSize: 14,
              position: 'inside'
            },
            labelLine: {
              show: false
            },
            data: [{
              value: data[i].value,
              name: data[i].name
            }, {
              value: sumValue - data[i].value,
              name: '',
              itemStyle: {
                color: 'rgba(0,0,0,0)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              label: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          res.series.push({
            name: '背景线',
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: true,
            hoverAnimation: false,
            radius: [71 - i * 15 + '%', 69 - i * 15 + '%'],
            center: ['50%', '55%'],
            label: {
              show: false
            },
            itemStyle: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              borderWidth: 5
            },
            data: [{
              value: 100,
              itemStyle: {
                color: 'RGB(12,64,128)',
                borderWidth: 0
              },
              tooltip: {
                show: false
              },
              hoverAnimation: false
            }]
          })
          res.yAxis.push(data[i].name)
        }
        return res
      }

      option = {
        backgroundColor: 'RGB(8,20,67)',
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: 'rgba(10,31,95,1)'
          }, {
            offset: 1,
            color: 'rgba(1,232,254,1)'
          }],
          global: false
        }],
        grid: {
          top: '16%',
          bottom: '54%',
          left: '50%',
          containLabel: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          z: 3,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: 'RGB(78,184,252)',
              fontSize: 16
            },
            show: true
          },
          data: optionData.yAxis
        }],
        xAxis: [{
          show: false
        }],
        series: optionData.series
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
